<template>
  <div>
    <!-- vxe 检索表单 -->
    <vxe-form 
        :data="formSearchDataCom" 
        title-width="120" 
        title-align="right"
        @submit="searchEvent" 
        @reset="resetSearchEvent"
      >
        <!-- 
          vxe-form-item  属性和事件
          title-prefix 
          item-render 项渲染器配置项 
         -->
        <vxe-form-item 
          field="code" 
          :title="$t('参数编码')" 
          span="12" 
          :title-prefix="{ message: $t('currencyManage.msg1'), icon: 'fa fa-exclamation-circle' }" 
          :item-render="{name: 'ElInput',props: {size: 'small'}}"
        >
        </vxe-form-item>

        <vxe-form-item 
          field="name" 
          :title="$t('参数名称')" 
          span="12" 
          :title-prefix="{ message: $t('currencyManage.msg1'), icon: 'fa fa-exclamation-circle' }" 
          :item-render="{name: 'ElInput',props: {size: 'small'}}"
        >
        </vxe-form-item>

         <!-- 查询&重置 -->
        <vxe-form-item 
        span="24" 
        align="center" 
        :item-render="{name: 'ElButtons', children: [{ content: $t('base.search'), props: {type: 'primary', nativeType: 'submit',size:'mini'} }, { content: $t('base.reset'), props: {nativeType: 'reset',size:'mini'} }]}"
        >
        </vxe-form-item>

    </vxe-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

//导入下拉容器组件
import SearchFormDropdContDemoItem from './SearchFormItem/SearchFormDropdContDemoItem'

export default {
  name: 'searchForm',
  components: {
    SearchFormDropdContDemoItem
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {
      /* 下拉容器-start */
      // 下拉容器字段定义
  
      /* 下拉容器-end */

    }
  },
  props:{
    formSearchData:{
      type: Object,
      default: function() {
        return {
          code: '',
          name: '',
        }
      }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
      formSearchDataCom:{
        get() {
            return this.formSearchData
        },
        set(val) {
            this.$emit('update:formSearchData', val)
        }
      }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    searchEvent(){
        // alert('searchEvent')
        this.$emit('searchEventEmit')
    },
    resetSearchEvent(){
        // alert('resetSearchEvent')
        this.$emit('resetSearchEventEmit')
    },

    // 下拉容器
    dtValueChangeEmit(value){
      this.formSearchDataCom.dtValue = value;
      console.log(this.formSearchDataCom);
    }



  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
       
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  


        

</style>